﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <link href="../Script/jquery-easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../Script/jquery-easyui/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="../Script/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../Script/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',border:false" style="height: 60px; background: #B3DFDA;
        padding: 10px">
        XXX公司客户关系管理系统，欢迎您，<b><font color="red">管理员</font></b></div>
    <div data-options="region:'west',split:true,title:'系统菜单'" style="width: 200px;">
        <div class="easyui-accordion" data-options="fit:true,border:false">
            <div title="Title1" style="padding: 10px;">
                <a href="javascript:void(0);" url="CommonDictionary.aspx" style="display: block;
                    margin-bottom: 10px;" onclick="show(this)" title="基础数据管理">基础数据管理</a> <a href="javascript:void(0);"
                        url="Department.aspx" style="display: block; margin-bottom: 10px;" onclick="show(this)"
                        title="部门管理">部门管理</a> <a href="javascript:void(0);" url="Role.aspx" style="display: block;
                            margin-bottom: 10px;" onclick="show(this)" title="角色管理">角色管理</a> <a href="javascript:void(0);"
                                url="User.aspx" style="display: block; margin-bottom: 10px;" onclick="show(this)"
                                title="用户管理">用户管理</a> <a href="javascript:void(0);" url="Menu.aspx" style="display: block;
                                    margin-bottom: 10px;" onclick="show(this)" title="菜单管理">菜单管理</a>
                <a href="javascript:void(0);" url="RoleMenu.aspx" style="display: block; margin-bottom: 10px;"
                    onclick="show(this)" title="角色菜单">角色菜单</a>
            </div>
            <div title="Title2" style="padding: 10px;">
                content2
            </div>
            <div title="Title3" style="padding: 10px">
                content3
            </div>
        </div>
    </div>
    <!--<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>-->
    <div data-options="region:'south',border:false" style="height: 50px; background: #B3DFDA;
        padding: 10px;">
        通知区</div>
    <div data-options="region:'center'" id="WorkArea">
        <!--Title="工作区"-->
        <div id="tabs" class="easyui-tabs" fit="true" border="false">
            <div title="首页" style="padding: 20px; overflow: hidden;" id="home">
                <h1>
                    Welcome to jQuery UI!</h1>
            </div>
        </div>
    </div>
    <!--右键菜单-->
    <div id="menu" class="easyui-menu" style="width: 150px;">
        <div id="m-close">
            关闭</div>
        <div class="menu-sep">
        </div>
        <div id="m-closeall">
            全部关闭</div>
        <div id="m-closeother">
            除此之外全部关闭</div>
        <div class="menu-sep">
        </div>
        <div id="m-refresh">
            刷新</div>
    </div>
    <script type="text/javascript">


        function show(obj) {
            if ($('#tabs').tabs('exists', $(obj).attr("title"))) {
                $('#tabs').tabs('select', $(obj).attr("title")); //如果面板已存在，则选中
                return;
            }

            $('#tabs').tabs('add', {
                title: $(obj).attr("title"),
                content: createFrame($(obj).attr("url")),
                closable: true,//除首页之外，添加的面板都允许关闭
                width: $('#WorkArea').width() - 10,
                height: $('#WorkArea').height() - 26
            });
        }

        function createFrame(url) {
            var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
            return s;
        }


        $(function () {
            //刷新   
            $("#m-refresh").click(function () {
                var currTab = $('#tabs').tabs('getSelected');
                //获取选中的标签项      
                var url = $(currTab.panel('options').content).attr('src');
                //获取该选项卡中内容标签（iframe）的 src 属性      
                /* 重新设置该标签 */
                $('#tabs').tabs('update', { tab: currTab, options: {
                    content: createFrame(url)
                }
                })
            });
            //关闭所有   
            $("#m-closeall").click(function () {
                var allTabs = $('#tabs').tabs('tabs');
                $(allTabs).each(function () {
                    var opt = this.panel('options');
                    if (opt.closable) {
                        $('#tabs').tabs('close', opt.title);
                    }
                });
            });
            //除当前之外关闭所有   
            $("#m-closeother").click(function () {
                var curTab = $('#tabs').tabs('getSelected');
                curTitle = curTab.panel('options').title;
                var allTabs = $('#tabs').tabs('tabs');
                $(allTabs).each(function () {
                    var opt = this.panel('options');
                    if (opt.closable && opt.title != curTitle) {//允许关闭并且不是当前面板，首页不允许关闭
                        $('#tabs').tabs('close', opt.title);
                    }
                });
            });
            //关闭当前 
            $("#m-close").click(function () {
                var currTab = $('#tabs').tabs('getSelected');
                var opt = currTab.panel('options');
                if (opt.closable)
                    $('#tabs').tabs('close', opt.title);
            });

            /*为选项卡绑定右键*/
            $(".tabs li").live('contextmenu', function (e) {
                /* 选中当前触发事件的选项卡 */
                var subtitle = $(this).text();
                $('#tabs').tabs('select', subtitle);
                //显示快捷菜单     
                $('#menu').menu('show', {
                    left: e.pageX, top: e.pageY
                });
                return false;
            });

        });



    </script>
</body>
</html>
